<template>
  <div>
    <div class="scroll_table">
      <div>

        <!-- 根据列配置动态生成表头。先简单的处理一下表头的列宽，让表头的宽度保持和列宽一样 -->
        <div class="scroll_table_header" :class="rowStyle">
          <div
            v-for="(citem, zindex) in columnsConfg"
            :key="'col'+zindex"
            :style="{ width: citem.width, paddingLeft: citem.paddingLeft }"
          >
            {{ citem.label }}
          </div>
        </div>

        <!-- 可以让表格滚动的包裹层 -->
        <div
          class="scrollWrap"
          :style="{
            height: scrollWrapHeight + 'px',
            overflowY: 'hidden',
          }"
        >
          <!-- 让表格循环滚动的动画样式添加，以及滚动时间的样式设置等 -->
          <div
            class="scroll_table_body"
            @mouseleave="toStartRun"
            @mouseenter="toPausedRun"
            :class="[scrollNum > 1 ? 'scroll' : '', animationPlayState]"
            :style="{
              animationDuration: runSpeed + 's',
            }"
            v-for="(a, index) in scrollNum"
            :key="'scroll'+index"
          >
            <!-- 具体的表格数据 -->
            <div
              style="display: flex;"
              v-for="(item, index) in rowdata"
              :key="'row'+index"
              class="content_tr"
              :class="rowStyle"
            >
              <!-- 根据传递进来的列配置来动态解析数据以及列宽是多少 -->
              <div
                v-for="(citem, zindex) in columnsConfg"
                :key="'config'+citem.prop"
                class="ellipsis"
                :style="{ width: citem.width, paddingLeft: citem.paddingLeft }"
                :title="item[citem.prop]"
              >
                <slot :name="citem.prop" :data="item">
                  {{ item[citem.prop] }}
                </slot>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名字
  name: 'ScrollTable',
  // 组件参数
  props: {
    // 行的显示风格，居中或者左对齐等，可以根据需要多写几套样式
    rowStyle: {
      type: String,
      default: 'content_tr_center',
    },
    // 滚动层的高度。可以把参数传递成表格的高度，滚动层的高度就等于表格的高度减去表头的高度,其实都无所谓怎么传递都可以
    scrollContentHeight: {
      type: Number,
      default: 350,
    },
    // 滚动速度
    runSpeed: {
      type: Number,
      default: 15,
    },
    // 列配置
    columnsConfg: {
      type: Array,
      default: () => {
        return []
      },
    },
    // 数据项
    rowdata: {
      type: Array,
      default: () => {
        return []
      },
      // required: true
    },
  },
  data() {
    return {
      // 配置默认是否滚动。animationPlayStatePaused(暂停)，animationPlayStateRun(滚动)
      animationPlayState: 'animationPlayStateRun',
      // 调节滚动速率。这个可以设置成参数从外边传递过来
      // time: 15,
    }
  },
  computed: {
    // 滚动层高度
    scrollWrapHeight: function () {
      /* 其实就是表格整体高度减去表头高度，可以写死，也可以动态计算一下，如果表头高度需要进行参数传递的话。       
               当然也可以直接传递滚动层的高度，就不用去减去表头的高度了，根据实际情况来就行了
            */
      // return 350
      return this.scrollContentHeight
    },
    // 滚动层份数，当内容溢出scrollWrapHeight，复制两份，添加滚动动画
    // 否则就一份，不填加滚动动画
    scrollNum: function () {
      // 41是每行的高度，可以写死，也可以通过参数传递进来
      let successHeight = this.rowdata.length * 41
      // alert(successHeight)
      // alert(this.scrollWrapHeight)
      if (successHeight > this.scrollWrapHeight) {
        return 2
      } else {
        return 1
      }
    },
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    // 暂停滚动
    toPausedRun() {
      this.animationPlayState = 'animationPlayStatePaused'
    },
    // 开始滚动
    toStartRun() {
      this.animationPlayState = 'animationPlayStateRun'
    },
  },
}
</script>

<style lang="scss" scoped>
.ellipsis {
            // width: 150px; /* 设置你想要的宽度 */
            white-space: nowrap; /* 不允许文本换行 */
            overflow: hidden; /* 隐藏超出的内容 */
            text-overflow: ellipsis; /* 显示省略号 */
        }
.scroll_table {
  margin-top: 20px;
  width: 100%;
  border-collapse: collapse;

  .scrollWrap::-webkit-scrollbar {
    width: 0 !important;
  }

  .scroll {
    animation: scrollData 10s infinite linear;
  }

  .animationPlayStateRun {
    animation-play-state: running;
  }

  .animationPlayStatePaused {
    animation-play-state: paused;
  }

  @keyframes scrollData {
    from {
      transform: translateY(0px);
    }

    to {
      transform: translateY(-100%);
    }
  }

  // 表头样式
  .scroll_table_header {
    height: 36px;
    padding: 8px 10px;
    // background: #082044;
    align-items: center;
    background: rgba(18, 74, 63, 0.6);
    // opacity: 0.5;
    display: flex;
    // padding: 0 10px 0 10px;

    div {
      height: 36px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      line-height: 36px;
      // padding-left: 10px;
    }
  }

  .content_tr {
    height: 41px;
    // background: #082044;
    background: rgba(18, 74, 63, 0.6);

    div {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      line-height: 36px;
      height: 36px;
    }
  }

  //----------- 行风格-左对齐  --------------
  .content_tr_left {
    div {
      text-align: left;
    }
  }

  //----------- 行风格-居中  --------------
  .content_tr_center {
    div {
      text-align: center;
    }
  }
}
</style>
